<!--
 * @Author: chenhuanhuan 2925102113@qq.com
 * @Date: 2024-07-22 11:20:44
 * @LastEditors: chenhuanhuan 2925102113@qq.com
 * @LastEditTime: 2024-11-20 12:25:26
 * @FilePath: \orderApp\pages\personal\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<route lang="json5" type="page">
{
  layout: "default",
  style: {
    navigationStyle: "custom",
    navigationBarTextStyle: "white",
    disableScroll:true,
  },
}
</route>

<template>
  <view class="personBox">
    <image class="personBox-bg" object-fit="contain"  :src="baseIMGURL + 'personBg.png'"></image>

    <view class="wrap" :style="{ '--top': top + 'px' }">
      <view class="titcss">我的</view>

      <view class="userBox">
        <cu-card height="212rpx">
          <view
            class="flex flex-justify-between flex-items-center cardBox"
           
          >
            <view class="flex flex-1">
              <uv-avatar :src="user.headPortrait" size="120rpx"></uv-avatar>
              <view class="ml-2 flex-1">
                <view class="flex flex-justify-between">
                  <text class="name">{{ user.nickname }}</text>
                  <view class="flex setBox" @click="goSetting">
                    <text class="mr-2">设置</text>
                    <uv-icon name="arrow-right" size="12"></uv-icon>
                  </view>
                </view>

                <view>
                  <text class="keichInfo">{{
                    user.foodOven ? user.foodOven.kitchenName : "未知"
                  }}</text>
                  <text class="keichInfo">{{ user.likeStyle }}</text>
                  <text class="keichInfo">{{ user.likeTaste }}</text>
                </view>
              </view>
            </view>
          </view>
        </cu-card>
      </view>
      <cu-card margin="31rpx 0" height="181rpx">
        <view class="flex cardBox">
          <view
            class="menu-item"
            v-for="(item, index) in menu1List"
            :key="index"
            @click="goPage(item.path)"
          >
            <uv-icon
              :name="`onerow${index + 1}`"
              custom-prefix="custom-icon"
              size="38rpx"
              color="#00754A"
            ></uv-icon>
            <text> {{ item.title }} </text>
          </view>
        </view>
      </cu-card>
      <cu-card height="181rpx">
        <view class="flex cardBox">
          <view
            class="menu-item"
            v-for="(item, index) in menu2List"
            :key="index"
            @click="goPage(item.path)"
          >
            <uv-icon
              :name="`tworow${index + 1}`"
              custom-prefix="custom-icon"
              size="38rpx"
              color="#00754A"
            ></uv-icon>
            <text> {{ item.title }} </text>
          </view>
        </view>
      </cu-card>
    </view>
  </view>
</template>

<script lang="ts" setup>
// 图片基地址
const baseIMGURL = import.meta.env.VITE_IMG_BASEURL;
import { useUserStore } from "@/store";

const { top } = useUserStore().pinia_SafeVal;

const { user } = useUserStore().userInfo;

const menu1List = ref([
  { title: "就餐记录", path: "/packageTwo/pages/mealRecords/index" },
  { title: "营养建议", path: "/packageTwo/pages/nutritionalAdvice/index" },
  { title: "我的点菜", path: "/packageTwo/pages/myDishes/index" },
  { title: "我的预定", path: "/packageTwo/pages/myReservations/index" },
]);
const menu2List = ref([
  { title: "我的点评", path: "/packageTwo/pages/myReview/index" },
  { title: "我的评议", path: "/packageTwo/pages/myComments/index" },
  { title: "我的关注", path: "/packageTwo/pages/myAttention/index" },
  { title: "我的点赞", path: "/packageTwo/pages/myLike/index" },
]);

const goSetting = () => {
  uni.navigateTo({
    url: "/packageOne/pages/personalInfo/index",
  });
};

const goPage = (path) => {
  uni.navigateTo({
    url: path,
  });
};
</script>

<style lang="scss" scoped>
//

.cardBox{
  height: 100%;
}
.personBox {
  width: 100%;
  height: 100vh;
  position: relative;

  &-bg {
    width: 100%;
    height:450rpx;
    position: absolute;
    top: 0;
    z-index: -1;
  }

  .wrap {
    padding: var(--top) 31rpx 0;
    .titcss {
      height: 44px;
      
      line-height: 44px;
      font-family: PingFang SC, PingFang SC;
      font-size: 33rpx;
      text-align: center;
      font-weight: 500;
      color: #fff;
    }
  }
  .userBox {
    margin-top: 171rpx;
    .name {
      font-weight: 600;
      font-size: 38rpx;
      color: #111111;
      line-height: 62rpx;
    }

    .keichInfo {
      font-weight: 400;
      font-size: 23rpx;
      color: #595a5b;
      line-height: 38rpx;

      &::after {
        content: "|";
        display: inline-block;
        line-height: 62rpx;
        margin: 0 20rpx;
        color: #e7e8eb;
      }

      &:last-child::after {
        content: none;
      }
    }

    .setBox {
      font-weight: 400;
      font-size: 23rpx;
      color: #969799;
      line-height: 38rpx;
      height: 38rpx;
    }
  }


  .menu-item {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    // padding: 10rpx 0;

    text {
      font-weight: 400;
      font-size: 27rpx;
      color: #323233;
      line-height: 42rpx;
      margin-top: 14rpx;
    }
  }
}
</style>
